<template>
  <div class="main-container">
       <!-- 轮播图   -->
    <div class="row" style="margin-bottom: 15px">
      <div class="col-lg-9 ">
        <AsyncCarousel></AsyncCarousel>
      </div>
      <div class="col-lg-3">
        <div class="grid-content ep-bg-purple-light">
          <!--  侧边栏   -->
          <Sidebar></Sidebar>
        </div>
        <!--  一言   -->
        <div class="grid-content ep-bg-purple-light" v-loading="!state.isFinish" >
          <el-card @click="clickHitoKoto()" shadow="always" style="text-align: center;color: #6c757d;font-size: 13px" >{{hitokotoStore.hitokoto}}</el-card>
        </div>
      </div>
    </div>
      <!--  轮播图end  -->
    <!-- 内容栏主体  -->
    <div class="row">
       <div class="col-lg-9" >
           <AsyncArticle></AsyncArticle>
       </div>
      <div class="col-lg-3" >
        <!--  侧边栏    -->
     <div class="grid-content ep-bg-purple-light ">
       <!--  热度榜    -->
       <indexRanking></indexRanking>
        <!--  猜你喜欢    -->
       <Recommend v-if="userStore.status"></Recommend>
     </div>
      </div>
    </div>
    <!-- 内容栏主体 end   -->
  </div>
</template>
<script setup>
import IndexRanking from "@/views/container/sidebar/ranking.vue";
import Sidebar from "@/views/container/sidebar/sidebar.vue";
import {defineAsyncComponent, onMounted, reactive, ref} from "vue";
import {useHitokotoStore} from "@/store/modules/Hitokoto";
import Recommend from "@/views/container/sidebar/recommend.vue";
import {useUserStore} from "@/store/modules/user";
const  hitokotoStore = useHitokotoStore();
const userStore = useUserStore();
const AsyncCarousel=defineAsyncComponent(() => import('@/components/carousel/carousel.vue'));
const AsyncArticle =defineAsyncComponent(() => import('@/views/container/tables/article.vue'));

const state = reactive({
  isFinish:true,
  order:"排序",
  type:"推荐",
  page:"article",
})

const method ={
  init: async () => {
    // await clickHitoKoto();
  },
}
// 获取一言接口
const  clickHitoKoto =()=>{
    if (state.isFinish){
      state.isFinish = false;
     setTimeout(()=>{
       hitokotoStore.CreateHitoKoto();
      state.isFinish = true;
    },2500)
  }
}

onMounted(()=>{
  // window.scrollTo(0, 0); // 或者根据需要滚动到特定位置
  method.init();
})
</script>


<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

/* 去掉选中的标签下的指示条 */
.el-tabs-style >>> .el-tabs__active-bar {
  border-bottom: #40a9ff;
  /*display: none;*/
}

/* 如果你还想进一步去掉未选中状态下的下划线阴影 */
.el-tabs-style >>> .el-tabs__nav-wrap::after {
  border-bottom: #40a9ff;
  /*height: 0;*/
}

.el-tabs-style >>> .el-tabs__item {
  color: #333; /* 默认文字颜色 */
  font-size: 16px; /* 字体大小 */
  font-weight: bold; /* 字体加粗 */
  border-radius: 15px;
}
.el-tabs-style >>> .el-tabs__item.is-active {
  color: #409eff !important; /* 选中时的文字颜色 */
}

.el-tabs-style >>>.el-tabs__nav-scroll{
  /*border: 1px solid #dcdfe6;*/
  /*box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);*/
  /*border-radius: 4px;*/
  padding-left: 15px;
  /*background-color: #fff;*/
}
.el-tabs-style >>> .el-tabs__header{
  padding: 0 5px 0 5px;
  /*overflow-x: scroll; !* 允许横向滚动 *!*/
  /*white-space: nowrap; !* 防止内容换行 *!*/
  /*background-color: #ffffff;*/
}

.fade-enter,
.fade-leave-to {
  transition: opacity 0.2s;
}

.fade-enter-active,
.fade-leave-active {
  opacity: 0;
}

</style>



<!--标签css -->
<style scoped>
.main-container {
  width: 1200px;
}
.ep-bg-purple {
  padding: 5px;

}
.ep-bg-purple-light {
  padding: 5px;
}



.grid-content {
  border-radius: 4px;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.nav-scroll::-webkit-scrollbar {
  display: none;
}

</style>


<!--公共css类-->
<style scoped>
.font-12 {
  font-size: 12px;
  font-weight: 700;
  line-height: 40px;
  text-align: right;
}
.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
}
</style>
